<template>
  <div>
    <vxe-modal
        v-model="show" id="add" width="50%" :size="size" height="80vh" :position="{top:'10%'}"
        @close="closeForm()" show-zoom="" resize="" transfer="" show-footer="">
      <!-- storage 将窗口拖动的状态保存到本地 remember 再次打开窗口时还原窗口状态-->
      <!--标题-->
      <template #title>
        <h3>添加应用</h3>
      </template>
      <!--主体-->
      <template #default>
        <el-form :size="size" ref="form" :model="form" class="form" :rules="rules" label-width="120px">
          <!--应用名-->
          <el-form-item prop="application_name">
            <template slot="label">
              <span>应用名 </span>
              <el-tooltip content="此名称为后端管理界面中的应用名称" placement="top-start">
                <i class="el-icon-warning-outline"></i>
              </el-tooltip>
            </template>
            <el-input tabindex="1" v-model="form.application_name" placeholder="请输入应用名称"/>
          </el-form-item>
          <!--应用目录名-->
          <el-form-item prop="app_dir">
            <template slot="label">
              <span>应用目录名 </span>
              <el-tooltip content="此名称为URL的虚拟目录名称" placement="top-start">
                <i class="el-icon-warning-outline"></i>
              </el-tooltip>
            </template>
            <el-input tabindex="3" v-model="form.app_dir" placeholder="请输入应用目录名"/>
          </el-form-item>
          <!--访问域名-->
          <!-- el-form-item label="访问域名" prop="domain">
            <template slot="label">
              <span>访问域名 </span>
              <el-tooltip content="输入实际开发或者部署的地址;比如开发时监听8000端口：http://127.0.0.1:8000/api" placement="top-start">
                <i class="el-icon-warning-outline"></i>
              </el-tooltip>
            </template>
            <el-input tabindex="5" v-model="form.domain" placeholder="系统只支持创建前端应用，请输入访问域名"/>
          </el-form-item -->
          <!--生成状态-->
          <el-form-item label="生成状态" prop="status">
            <template slot="label">
              <span>生成状态 </span>
              <el-tooltip content="是否允许生成应用代码" placement="top-start">
                <i class="el-icon-warning-outline"></i>
              </el-tooltip>
            </template>
            <el-radio-group v-model="form.status">
              <el-radio-button :label="1">启用</el-radio-button>
              <el-radio-button :label="0">禁用</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <!--底部-->
      <template #footer>
        <el-button :size="size" :loading="loading" type="primary" @click="submit" :disabled="form.app_type == '1'">
          <span v-if="!loading">确 定</span>
          <span v-else>提 交 中...</span>
        </el-button>
        <el-button :size="size" @click="closeForm">取 消</el-button>
      </template>
    </vxe-modal>
  </div>
</template>
<script>
import {createApplication, getTableList} from '../sys'

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: false
    }
  },
  data() {
    return {
      form: {
        status: 1,
        app_type: 2,
        app_construct: []
      },
      loading: false,
      tableList: [],
      rules: {
        application_name: [{required: true, message: '请输入应用名', trigger: 'blur'}],
        app_dir: [{required: true, message: '请输入应用目录名', trigger: 'blur'}],
        login_table: [{required: true, message: '请配置登录数据表', trigger: 'blur'}],
        login_fields: [{required: true, message: '请配置登录账号密码字段', trigger: 'blur'}],
      },
    }
  },
  watch: {
    show() {
      getTableList().then(res => {
        this.tableList = res.data
      })
    }
  },
  methods: {
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          createApplication(this.form).then(res => {
            if (res.status == 200) {
              this.$message({message: '操作成功', type: 'success'})
              this.$emit('refesh_list', res.data)
              this.closeForm()
            } else {
              this.loading = false
            }
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    closeForm() {
      this.$emit('update:show', false)
      this.loading = false
      this.$refs['form'].resetFields()
    }

  },
}
</script>
